<template>
  <div class="data-statistics c6-container">
    <div slot="searchform" class="form-top">
      <form action="">
        <p class="form-top-p">
          <el-select v-model="listQuery.deptCode" clearable placeholder="请选择单位" @clear="delDeptDw" @change="changeDw">
            <el-option v-for="item in deptList_dw" :key="item.mCode" :label="item.deptName" :value="item.mCode" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-select v-model="listQuery.lineId" clearable placeholder="请选择线路" @clear="delLine" @change="changeLine">
            <el-option v-for="item in lines" :key="item.seclineId" :label="item.seclineName" :value="item.seclineId" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-select v-model="listQuery.lineSiteId" clearable placeholder="请选择区站">
            <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-select v-model="listQuery.workShopCode" clearable placeholder="请选择车间">
            <el-option v-for="item in deptList_cj" :key="item.mCode" :label="item.deptName" :value="item.mCode" />
          </el-select>
        </p>
        <p class="form-top-p">
          <el-date-picker
            v-model="listQuery.findDateList"
            :clearable="false"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeFindDate" />
        </p>
        <p class="form-top-p">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
        </p>
      </form>
    </div>
    <el-row>
      <el-col v-loading="loading.loading1" :span="8" style="max-width:620px;min-width:620px;position:relative;">
        <p class="col-title"><i class="el-icon-s-data" />缺陷多发支柱 TOP30（<font color="black" style="font-size: 8px;">时间范围:{{ this.lastCurrentDateStr }}-{{ this.currentDateStr }}</font>）</p>
        <div class="v-flex col-div">
          <el-table :data="tableData1" height="100%" border stripe :highlight-current-row="true" @row-click="rowClick">
            <el-table-column label="序号" align="center" type="index" width="50" />
            <el-table-column label="单位" align="center" prop="sectionName" width="100" />
            <el-table-column label="线路" align="center" prop="lineName" show-overflow-tooltip />
            <el-table-column label="区站" align="center" prop="siteName" show-overflow-tooltip />
            <el-table-column label="支柱号" align="center" prop="pillarNum" width="70" />
            <el-table-column label="所属工区" align="center" prop="workareaName" show-overflow-tooltip />
            <el-table-column label="缺陷总数" align="center" prop="defectTotal" />
          </el-table>
        </div>
      </el-col>
      <el-col v-loading="loading.loading2">
        <div class="col-title" style="display:flex;">
          <p class="col-title"><i class="el-icon-s-data" />缺陷详情</p>
        </div>
        <div class="v-flex col-div">
          <el-table :data="tableData2" height="100%" border stripe>
            <el-table-column label="序号" align="center" type="index" width="50" />
            <el-table-column label="6C类型" align="center" prop="cType" />
            <el-table-column label="发现日期" align="center" prop="findDate" show-overflow-tooltip :formatter="formatDate" />
            <el-table-column label="缺陷类型" align="center" prop="categoryName" show-overflow-tooltip />
            <el-table-column label="缺陷等级" align="center" prop="levelName" />
            <el-table-column label="所属工区" align="center" prop="deptName" show-overflow-tooltip />
            <el-table-column label="缺陷描述" align="center" prop="defectDescription" show-overflow-tooltip />
            <el-table-column align="center" label="操作" min-width="60">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="view(scope.row,scope.$index)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading="loading.loading3">
        <p class="col-title"><i class="el-icon-s-data" />缺陷类型分布</p>
        <div class="v-flex col-div">
          <div v-if="aliveType" id="chart1" class="col-div" />
        </div>
      </el-col>
      <el-col v-loading="loading.loading4" :span="8" style="max-width:620px;min-width:605px;position:relative;">
        <div class="col-title" style="display:flex;">
          <p class="col-title"><i class="el-icon-s-data" />缺陷等级分布</p>
        </div>
        <div class="v-flex col-div">
          <div v-if="aliveLevel" id="chart2" class="col-div" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading="loading.loading5">
        <p class="col-title"><i class="el-icon-s-data" />6C类型缺陷分布图（<font color="black" style="font-size: 8px;">时间范围:{{ this.lastCurrentDateStr }}-{{ this.currentDateStr }}</font>）</p>
        <div class="v-flex col-div">
          <div id="chart3" class="col-div" style="height: 230px;" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import { findManageUnitDeptList, getLineList, railtypeList } from '@/api/platform'
import { getDeptByTypeCodeBy, getSiteByLines } from '@/api/cms/basic'
import { getDefectPillarTop30, getDefectPillarDetail, getDefectTypeEchart, getDefectLevelEchart, getDefectEchart } from '@/api/cms/Analysis-management/synthetical-Analysis/defectPillar'
import { mapGetters } from 'vuex'
export default {
  name: 'DefectPillar',
  components: {
  },
  data() {
    return {
      deptList_dw: [],
      deptList_cj: [],
      lines: [],
      railTypes: [],
      siteList: [],
      listQuery: {
        deptCode: '',
        workShopCode: '',
        lineId: '',
        railType: '',
        lineSiteId: '',
        findDateList: [this.getLastCurrentDate(), new Date()]
      },
      queryDept: {
        deptTypeCode: 22,
        railType: null,
        fid: null
      },
      queryLine: {
        railType: null,
        unitDeptCode: null
      },
      secLineIds: null, // 用于查询区站的线路ID
      loading: {
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false
      },
      tableData1: [],
      tableData2: [],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      colorList: ['#4962FC', '#F59A23', '#dd3ee5', '#12e78c', '#fe8104', '#01C2F9', '#F4CB29', '#FD9E06'], // '#4B7CF3'
      timer: null,
      currentDateStr: null,
      lastCurrentDateStr: null,
      aliveLevel: false,
      aliveType: false
    }
  },
  created() {},
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    'sidebar.opened': function(val) {
      var that = this
      setTimeout(function() {
        that.myChart1.resize()
        that.myChart2.resize()
        that.myChart3.resize()
      }, 500)
    }
  },
  mounted() {
    var that = this
    this.timer = setTimeout(function() {
      that.tabshow = false
    }, 5000)

    this.getLastCurrentDate()
    this.getData()

    // 监听屏幕变化，改变echarts尺寸
    const _this = this
    this.myresize = window.addEventListener('resize', function() {
      _this.$nextTick(_ => {
        if (_this.myChart1)_this.myChart1.resize()
        if (_this.myChart2)_this.myChart2.resize()
        if (_this.myChart3)_this.myChart3.resize()
      })
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.myresize)
    if (this.myChart1) {
      this.myChart1.dispose()
      this.myChart1 = null
    }
    if (this.myChart2) {
      this.myChart2.dispose()
      this.myChart2 = null
    }
    if (this.myChart3) {
      this.myChart3.dispose()
      this.myChart3 = null
    }
  },
  methods: {
    getData() {
      this.getDefectPillarTop30()
      // 缺陷类型分布散点图
      this.getDefectEchart()
      this.getList()
    },
    // 获取下拉数据、字典
    getList() {
      // 获取单位
      findManageUnitDeptList({}).then(response => {
        this.deptList_dw = response.data
      })
      // 线路类型
      railtypeList().then(response => {
        this.railTypes = response.data
      })
    },
    getDefectPillarTop30() {
      this.tableData1 = []
      this.tableData2 = []
      this.aliveLevel = false
      this.aliveType = false
      this.loading.loading1 = true
      getDefectPillarTop30(this.listQuery).then(response => {
        this.tableData1 = response.data
        this.loading.loading1 = false
        this.aliveLevel = true
        this.aliveType = true
        // 缺陷详情
        this.getDefectPillarDetail(response.data[0].pillarId)
        // 缺陷类型分布
        this.getDefectTypeEchart(response.data[0].pillarId)
        // 缺陷等级分布
        this.getDefectLevelEchart(response.data[0].pillarId)
      }).catch(() => {
        this.loading.loading1 = false
      })
    },
    getDefectPillarDetail(pillarId) {
      this.loading.loading2 = true
      getDefectPillarDetail({ 'pillarId': pillarId }).then(response => {
        this.tableData2 = response.data
        this.loading.loading2 = false
      })
    },
    getDefectTypeEchart(pillarId) {
      this.loading.loading3 = true
      getDefectTypeEchart({ 'pillarId': pillarId }).then(response => {
        this.initEchart('chart1', response.data)
        this.loading.loading3 = false
      })
    },
    getDefectLevelEchart(pillarId) {
      this.loading.loading4 = true
      getDefectLevelEchart({ 'pillarId': pillarId }).then(response => {
        this.initEchart('chart2', response.data)
        this.loading.loading4 = false
      })
    },
    // 散点图
    getDefectEchart() {
      this.loading.loading5 = true
      getDefectEchart(this.listQuery).then(response => {
        const myChart = echarts.init(document.getElementById('chart3'))
        const option = {
          color: this.colorList,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            show: true, // 是否显示直角坐标系的网格,true显示，false不显示
            left: 30, // grid组件离容器左侧的距离
            right: 70,
            top: 40,
            bottom: 35,
            containLabel: false // grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器
          },
          xAxis: {
            type: 'time',
            name: '发现日期',
            axisLabel: {
              interval: 0,
              rotate: 40
              // formatter:function (params){
              //   let tempStr = ""
              //   return tempStr
              // }
            }
          },
          yAxis: {
            type: 'value',
            name: '缺陷数量'
          },
          series: [
            {
              name: '缺陷数量',
              data: response.data,
              type: 'scatter',
              symbolSize: 5
            }
          ]
        }
        myChart.setOption(option)
        this.loading.loading5 = false
      })
    },
    initEchart(elementById, seriesData) {
      const myChart = echarts.init(document.getElementById(elementById))
      const option = {
        color: this.colorList,
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 10,
          bottom: -5
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '80%',
            center: ['30%', '60%'],
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 点击某行
    rowClick(row, column, event) {
      // 缺陷详情
      this.getDefectPillarDetail(row.pillarId)
      // 缺陷类型分布
      this.getDefectTypeEchart(row.pillarId)
      // 缺陷等级分布
      this.getDefectLevelEchart(row.pillarId)
    },
    // 查询
    search() {
      this.currentDateStr = this.getDateStr(this.listQuery.findDateList[1])
      this.lastCurrentDateStr = this.getDateStr(this.listQuery.findDateList[0])
      this.getData()
    },
    // 重置
    reset() {
      this.listQuery = {
        deptCode: '',
        workShopCode: '',
        lineId: '',
        railType: '',
        siteId: '',
        findDateList: [this.getLastCurrentDate(), new Date()]
      // eslint-disable-next-line no-sequences
      },
      this.deptList_cj = [],
      this.lines = [],
      this.siteList = [],
      this.getData()
    },
    formatDate(row, column) {
      const date = new Date(parseInt(row.findDate))
      const Y = date.getFullYear() + '-'
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      // let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      // let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      // let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      // return Y + M + D + h + m + s;
      return Y + M + D
    },
    changeDw(val) {
      this.queryDept.fid = val
      this.getDeptByTypeCodeBy()

      this.deptList_dw.forEach(item => {
        if (val === item.deptId) {
          this.queryLine.unitDeptCode = item.deptNo
          this.getLineList()
        }
      })
    },
    changeRailType(val) {
      this.queryDept.railType = val
      this.getDeptByTypeCodeBy()

      this.queryLine.railType = val
      this.getLineList()
    },
    changeLine(val) {
      this.secLineIds = val
      this.getSiteByLines()
    },
    changeFindDate(val) {
      this.listQuery.findDateList = [val[0], val[1]]
    },
    delDeptDw() {
      this.queryDept.fid = null
      this.getDeptByTypeCodeBy()

      this.queryLine.unitDeptCode = null
      this.getLineList()

      this.listQuery.deptId_dw = null
    },
    delRailType() {
      this.queryDept.railType = null
      this.getDeptByTypeCodeBy()

      this.queryLine.railType = null
      this.getLineList()

      this.listQuery.railType = null
    },
    delLine() {
      this.secLineIds = null
      this.listQuery.lineId = null
      this.getSiteByLines()
    },
    // 获取车间
    getDeptByTypeCodeBy() {
      if (this.queryDept.railType != null || this.queryDept.fid != null) {
        getDeptByTypeCodeBy(this.queryDept).then((response) => {
          this.deptList_cj = response.data
        })
      } else {
        this.deptList_cj = []
      }
    },
    // 获取线路
    getLineList() {
      if (this.queryLine.railType != null || this.queryLine.unitDeptCode != null) {
        getLineList(this.queryLine).then((response) => {
          this.lines = response.data
        })
      } else {
        this.lines = []
      }
    },
    // 获取区间站场
    getSiteByLines() {
      if (this.secLineIds != null) {
        getSiteByLines(this.secLineIds).then((response) => {
          this.siteList = response.data
        })
      } else {
        this.siteList = []
      }
    },
    getLastCurrentDate() {
      const currentDate = new Date()
      const lastCurrentDate_tmp = currentDate.setYear(currentDate.getFullYear() - 1)
      const lastCurrentDate = new Date(parseInt(lastCurrentDate_tmp))
      this.currentDateStr = this.getDateStr(currentDate)
      this.lastCurrentDateStr = this.getDateStr(lastCurrentDate)
      return lastCurrentDate
    },
    getDateStr(date) {
      const Y = date.getFullYear() + '-'
      const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      const D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      return Y + M + D
    }
  }
}
</script>

<style scoped lang="scss">
.data-statistics{
  background: rgb(212, 212, 212);
  padding: 6px;
  overflow-y: auto;
  .hide-tab{
    padding-top: 6px;
    padding-bottom:8px;
    margin-top: -48px;
    transition: all 0.4s linear;
  }
  .show-tab{
    margin-top: 6px;
    padding-bottom:0;
    transition: all 0.4s linear;
  }
  .el-tabs{

    ::v-deep .el-tabs__header{
      margin: 0;
      .el-tabs__item{
        background: white;
      }
      .el-tabs__item:hover{
        transform: scale(1.04,1.06);
      }
      .is-active{
        background: white;
      }
    }
  }

  .el-row{
    flex: 1;
    display: flex;
    min-height: 250px;
    .el-col{
      background: white;
      .col-div{
        padding: 0 8px;
        height:calc(100% - 42px);
        width:100%;
      }
    }
    .el-col:not(:last-child){
      margin-right: 8px;
    }
  }
  .el-row:not(:last-child){
    padding-bottom: 8px;
  }
}
.col-title{
  height: 34px;
  line-height: 34px;
  padding-left: 10px;
  font-weight: bold;
  text-align: left;
  font-size: 15px;
  margin-bottom: 6px;
  color: white;
  background:linear-gradient(180deg,#409eff,#64b1ff);
  .dept-select{
    margin-right: 16px;
    color: white;
    cursor: pointer;
  }
  .dept-select:hover{
    transform: scale(1.04,1.04);
  }
}
.col-table{
  width: 100%;
  text-align: left;
  height: calc(100% - 48px);
  border-collapse: collapse;

  border-spacing: 0;
  td,th{
    font-size: 15px;
    color: black;
    width: 25%;
    border: solid 1px #ccc;
    padding: 6px;
  }
  td{
    text-align: center;
    cursor: pointer;
  }
  td:hover{
    color: white;
    font-weight: bold;
    background: #409eff;
  }
}
.sortList{
  div{
    flex: 1;
    padding:4px 4% 0;
    cursor: pointer;
  }
  p{
    height: 32px;
    line-height: 32px;
    display: flex;
    color: white;
    .num{
      display: inline-block;
      text-align: center;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      box-shadow: 2px 2px 2px rgb(102, 102, 102);
    }
    .content{
      padding: 0 10px;
      font-size: 14px;
      flex: 1;
      display: flex;
      span{
        flex: 1;
        text-align: right;
      }
    }
  }
  div:hover{
    background: #eeeeee;
    p{
      transform: scale(1.04,1.04);
    }
  }
}
.basic-div{
  display: flex;
  margin-bottom: 6px;
  flex: 1;
  .itemrow-item{
    flex: 1;
    margin: 0 2px;
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    text-align: center;
    align-items: center;
    color:white;
    background: linear-gradient(180deg,#51c3fb,#99e3fd);
    p{
      font-size: 14px;
    }
    span{
      font-size: 18px;
    }
  }
  .itemrow-item:nth-child(odd){
    background: linear-gradient(180deg,#939bf8,#d1d4f8);
  }
  .itemrow-item:hover{
    transform: scale(1.06,1.06);
  }
}
.el-icon-s-data{
  margin-right: 10px;
  font-size: 18px;
}
.tableClass{
  position: absolute;
  width: 10px;
  height: 10px;
  top:0;
  left: 0;
  background: white;
  background: rgb(212, 212, 212);
  z-index: 3;
  overflow: hidden;
  transition: all 0.4s linear;
}
.bigtable{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2003;
}
.tableClass-top{
  height: 36px;
  line-height: 36px;
  padding-left: 14px;
  font-size: 15px;
  color:#409eff;
  background: white;
  .el-icon-close{
    position: absolute;
    font-size: 24px;
    cursor: pointer;
    color: black;
    right: 14px;
    top: 6px;
  }
}
.dialog-look {
  .el-dialog__body {
    height: calc(80vh - 1px);
    .base-table {
      height: 470px!important;
    }
  }
}
#customers {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}
#customers td, #customers th {
  border: 1px solid #DFE6EC;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#customers tr td:nth-child(odd){
  width: 120px;
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 26px;
  text-align: right;
  background: #E9F2FC;
}
#customers tr td:nth-child(even){
  padding-left: 20px;
  padding-right: 20px;
}
.dialog_box #customers tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#customers .file-content {
  min-height: 187px;
}

.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td {
  color: #fff;
  background-color: #a2a4a7!important;
}

</style>
